/* banner */
.banner{overflow: hidden;position: relative;}
.banner img{width: 100%;}

.banner .swiper-slide{overflow: hidden;}
.banner .slide-inner{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-size: cover;background-position: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;color:#fff;}
.banner .hb{height: 800px;}
.banner .hb img,.banner .mb img{opacity: 0;}
.banner .mb{display: none;}

.banner .swiper-pagination-bullet{transition: all 0.3s;}
.banner .swiper-pagination-bullet-active{width: 24px;background-color: rgba(0, 0, 0, 0.4);border-radius: 4px;}

.banner #bannerSwiper{min-height: 380px;}

.banner .swiper-button-prev,.banner .swiper-button-next{width: 50px;height: 50px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.5);color: #fff;}
.banner .swiper-button-next:after, .banner .swiper-button-prev:after{font-size: 16px;}

.banner .bb{position: absolute;bottom: -2px;left: 0;z-index: 5;width: 100%;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 2%;}

/* about */
.about{position: relative;background-size: cover;background-position: center;background-repeat: no-repeat;height: 800px;}
.about .max-w1{height: 100%;}
.about .a-l{height: 100%;position: relative;}
.about .a-l .fr{width: 100%;max-width: 460px;float: left;color: #fff;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.about .a-l .fr .a-con{margin-top: 14%;line-height: 30px;font-size: 16px;color: #fff;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 8;-webkit-box-orient: vertical;}
.about .a-l .fr a{margin-top: 7%;display: block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #fff;border-radius: 50%;font-size: 18px;color: #fff;font-family: cursive;font-weight: bold;position: relative;transition: all 0.3s;overflow: hidden;z-index: 1;}
.about .a-r{padding: 0 0;height: 100%;position: relative;}
.about .a-r img{width: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.about .a-l .fr a::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #CA0016;transition: all 0.3s;z-index: -1;border-radius: 50%;}
.about .a-l .fr a:hover{color: #fff;border: 1px solid #CA0016;}
.about .a-l .fr a:hover::after{width: 110%;height: 110%;}

/* Pro */
.product{margin: 0 auto;position: relative;padding-top: 7%!important;background-size: 1920px auto;background-position: 0 bottom;}
.product .n-area{overflow: unset;}
.product .tit{position: relative;margin-bottom: 1%;}
.product h2{display: inline-block;padding: 0 15px;}
.product .pro-cate{position: absolute;right: 0;top: 50%;width: calc(100% - 155px);transform: translateY(-50%);}
.product .pro-cate li{float: right;margin: 2px 15px 2px 0;position: relative;z-index: 1;transition: all 0.3s;overflow: hidden;width: calc(16.666666% - 15px);max-width: 130px;}
.product .pro-cate li a{display: block;border: 1px solid #ccc;color: #222;font-size: 16px;line-height: 58px;position: relative;z-index: 3;transition: all 0.3s;width: 100%;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0 5%;float: left;}
.product .pro-cate li::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #CA0016;width: 0;height: 0;transition: all 0.3s;}
.product .pro-cate li::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #CA0016;width: 0;height: 0;transition: all 0.3s;}
.product .proli{display: inline-block;width: 100%;}
.product .proli a{display: inline-block;width: 100%;margin-bottom: 10%;padding: 1px;background-color: #dbdbdb;position: relative;z-index: 1;transition: all 0.3s;}
.product .proli a::after{position: absolute;z-index: 2;content: '';right: 0;top: 0;background-color: #CA0016;width: 0;height: 0;transition: all 0.3s;}
.product .proli a::before{position: absolute;z-index: 2;content: '';left: 0;bottom: 0;background-color: #CA0016;width: 0;height: 0;transition: all 0.3s;}
.product .proli a .pro-img{overflow: hidden;position: relative;padding-top: 100%;z-index: 3;background-color: #fff;}
.product .proli a .pro-img img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;}
.product .proli a .pro-tit{position: relative;z-index: 3;}
.product .proli a .pro-tit p{color: #222;font-size: 16px;padding: 6% 5%;background-color: #fff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-right: calc(35px);}
.product .proli a .pro-tit span{width: 32px;height: 32px;text-align: center;line-height: 32px;color: #ccc;border: 1px solid #ccc;position: absolute;right: 5%;top: 50%;transform: translateY(-50%);font-size: 30px;background-color: #fff;}
.product .more{float: right;display: block;font-size: 16px;color: #999;margin-right: 15px;}
.product .more span{display: inline-block;width: 59px;height: 59px;text-align: center;line-height: 59px;border: 1px solid #999;border-radius: 50%;font-size: 18px;color: #999;font-family: cursive;font-weight: bold;position: relative;z-index: 1;}

.product .more span::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #CA0016;transition: all 0.3s;z-index: -1;border-radius: 50%;}

.product .more:hover span{color: #fff;border: 1px solid #CA0016;}
.product .more:hover span::after{width: calc(100% + 1px);height: calc(100% + 1px);}
.product .proli a:hover{box-shadow: 0 0 5px;}
.product .proli a:hover .pro-tit p{background-color:rgba(0, 0, 0, 0);color: #fff;}
.product .proli a:hover::after,.product .proli a:hover::before{width: 100%;height: 100%;}
.product .pro-cate li:hover::after,.product .pro-cate li:hover::before{width: 100%;height: 100%;}
.product .pro-cate li:hover a{color: #fff;}

/* app */
.app {padding: 4% 15px!important;background-size: 1920px auto;background-position: 0 top;}
.app #appSwiper{overflow: hidden;}
.app h2{text-align: center;margin: 0% 0 3%;transition: all 0.3s;}
.app ul li{position: relative;background-size: cover;transition: all 0.3s;z-index: 1;cursor: pointer;overflow: hidden;border-radius: 50px;}
.app ul li .app-info{text-align: center;transition: all 0.3s;z-index: 3;width: 100%;height: 25%;position: absolute;max-height: 125px;}
.app ul li .app-info::after{content: '';display: inline-block;width: 100%;height: 100%;background-size: cover;background-position: center bottom;position: absolute;top: 0;left: 0;background-image: url(../images/app-tit-bg1.png);transition: all 0.3s;opacity: 0.5;background-repeat: no-repeat;}
.app ul li .app-info p{width: 100%;text-align: center;font-size: 17px;font-weight: bold;position: absolute;z-index: 2;color: #fff;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.app ul li .app-img{width: 100%;padding-top: 200%;position: relative;overflow: hidden;}
.app ul li .app-img img{width: 100%;height: 100%;object-fit: cover;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);transition: all 0.3s;}

.app ul li:hover .app-info{}
.app ul li:hover .app-img img{width: 105%;height: 105%;}
/* case */
.case{width: 100%;padding: 0!important;}
.case #caseSwiper{overflow: hidden;width: 100%;}
.case .info{position: relative;padding-top: 75%;overflow: hidden;}
.case .info .more{width: 100%;height: 100%;left: 0;background-color: rgba(0, 0, 0, 0.65);position: absolute;z-index: 2;bottom: 100%;transition: all 0.3s;}
.case .info .more span{display: inline-block;border: 1px solid #fff;color: #fff;padding: 4% 8%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 25px;border-bottom-right-radius: 0;font-size: 14px;}
.case .info img{position: absolute;width: 100%;height: 100%;object-fit: cover;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.case .info p{position: absolute;bottom: 0;left: 0;width: 100%;color: #fff;padding: 4% 0;background-color: rgba(0, 0, 0, 0.4);text-align: center;font-size: 22px;transition: all 0.3s;}

.case .info:hover .more{bottom: 0;}
.case .info:hover p{transform: translateY(100%);}


/* news */
.news{margin: 5% 0;}
.news .li-d{width: 100%;}
.news .li-d a{display: inline-block;width: 100%;color: #333;}
.news .li-d a .img{position: relative;width: 100%;padding-top: 80%;overflow: hidden;border-radius: 70px;}
.news li:nth-child(2n-1) .li-d a .img{border-bottom-right-radius: 0;}
.news li:nth-child(2n) .li-d a .img{border-bottom-left-radius: 0;}
.news .li-d a .img img{position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%,-50%);object-fit: cover;transition: all 0.3s;}

.news .li-d a .info h4{font-size: 20px;line-height: 25px;height: 50px;overflow: hidden;margin: 10% 0;transition: all 0.3s;}
.news .li-d a .info p{font-size: 16px;color: #8a8a8a;margin-bottom: 10%;line-height: 25px;height: 100px;overflow: hidden;transition: all 0.3s;overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;}

.news li:nth-child(2n) .li-d a .info{padding-top: 20%;}

.news .li-d:hover a .img img{width: 110%;height: 110%;}
.news .li-d:hover a .info h4{color: #CA0016;}
.news .li-d:hover a .info p{color: #CA0016;opacity: 0.6;}

@media screen and (min-width: 0px) and (max-width:1400px){
    .banner .hb{height: 650px;}
}
@media screen and (min-width: 0px) and (max-width:1250px){
    .num-change{position: relative;bottom: 0;float: left;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .news ul li a p{-webkit-line-clamp:3}
    .product .tit{margin-bottom: 1%;}
}
@media screen and (min-width: 0px) and (max-width:1100px){
    .banner .hb{height: 550px;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    .num-change .counter, .num-change b{font-size: 32px;}
    .num-change .shuzi p:last-child{font-size: 14px;}
    .num-change{position: relative;bottom: 0;float: left;}
    .about{height: 500px;}
    .about .a-l{margin-top: 3%;}
    .about .a-l .fr{max-width: none;}
    .about .a-l .fr .a-con{margin-top: 5%;font-size: 14px;}
    .product{margin-top: 3%;}
    .product .tit{text-align: center;}
    .product .pro-cate{position: relative;top: 0;transform: none;width: 100%;}
    .product .pro-cate li{float: left;margin: 0 2% 1%;width: 29%;}
    .product .pro-cate li a{font-size: 14px;}
    .product .proli li:nth-child(7),.product .proli li:nth-child(8){display: none;}
    .product .pro-cate li a{line-height: 48px;}
    .product .more,.news h2 a{font-size: 14px;}
    .about .a-l .fr a,.product .more span,.news h2 a span{width: 49px;height: 49px;line-height: 49px;}
    .product .pro-cate{padding: 0 15px;}
}
@media screen and (min-width: 0px) and (max-width:900px){
    .banner .hb{height: 450px;}
}
@media screen and (min-width: 0px) and (max-width:768px){
    .app ul li{border-radius: 30px;}
    .case .info p{font-size: 18px;}
    .product .proli li:nth-child(2n-1){padding-right: 5px;}
    .product .proli li:nth-child(2n){padding-left: 5px;}
    .news ul li:first-child a{padding-top: 350px;}
    .news ul li a{height: auto;transition: all 0.3s;}
    .news ul li{margin-bottom: 20px;}
    .news ul li .li-d:hover::after,.news ul li .li-d:hover::before{display: none;}
    .news ul li .li-d:hover a{height: auto!important;width: calc(100%)!important;margin: 0;}
    .news ul li:first-child a div:hover::after{right: 0;left: auto;width: 100%;height: 100%;}
    .news ul li:first-child a div:hover::before{right: auto;left: 0;width: 100%;height: 100%;}

}
@media screen and (min-width: 0px) and (max-width:750px){
    .banner .hb{display: none;}
    .banner .mb{display: block;}
}
@media screen and (min-width: 0px) and (max-width:550px){
    .app ul li .app-info,.app ul li .app-info p{height: 80px;line-height: 80px;}
    .about .a-l .fr a,.product .more span,.news h2 a span{width: 39px;height: 39px;line-height: 39px;}

    .banner .swiper-button-prev, .banner .swiper-button-next{width: 30px;height: 30px;}
    .banner .swiper-button-next:after, .banner .swiper-button-prev:after{font-size: 12px;}
}
@media screen and (min-width: 0px) and (max-width:375px){
    .product .more,.news h2 a{font-size: 12px;}
    .num-change .shuzi p:last-child{font-size: 12px;}
    .product .proli a .pro-tit p{font-size: 12px;}
}
@media screen and (min-width: 0px) and (max-width:320px){
}

.txt-swiper .swiper-slide p img{opacity: 0;transform: translateY(-30%);}
.txt-swiper .swiper-slide p img:first-child{animation: fade 2s ease 1 forwards;}
.txt-swiper .swiper-slide p img:last-child{animation: fade 2s ease 1.5s 1 forwards;}
@keyframes fade {
    0%{
        opacity: 0;
        transform: translateY(-30%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}